<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>学生请假</title>
    <link href="../css/student-apply.css" rel="stylesheet" type="text/css"/>
    <script charset="utf-8" src="../tools/jquery-3.6.0.min.js" type="text/javascript"></script>
</head>
<body>
<script type="module">
    import '../xy-ui/index.js';
    // 点点表示退出到上一级目录
</script>
<!-- 调整一下样式 就这样先 ，我们试试把它放到主页-->
<!-- 再思考一下如何简化用户操作成本 -->
<!-- 表单 -->
<xy-form action="/student/apply/commit" id="form-submit" method="post">

    <xy-form-item legend="学号">
        <xy-input maxlength="10" minlength="10" name="stId" placeholder="你的学号" required
                  th:defaultvalue="${#session.getAttribute('id')}"></xy-input>
    </xy-form-item>

    <!-- 输入学号后自动填写姓名 -->
    <xy-form-item legend="姓名">
        <xy-input name="stName" placeholder="你的姓名" required></xy-input>
    </xy-form-item>

    <xy-form-item legend="请假事由">
        <xy-textarea name="reason" placeholder="请真实填写你的请假原因~" required></xy-textarea>
    </xy-form-item>

    <xy-form-item legend="请假时段">
        <xy-date-picker></xy-date-picker>
        -
        <xy-date-picker></xy-date-picker>
    </xy-form-item>

    <!--这两个隐藏的目的是为了让表单提交的时候能有我们的时间段，隐藏的-->
    <input hidden name="startTime"/>
    <input hidden name="endTime"/>

    <!-- 我们可以知道学生都选了哪些课程,所以我们可以让学生选择就好 -->
    <!-- 好像有可输入的下拉框,有的 -->
    <xy-form-item legend="请假课程">
        <xy-select name="course" required search>
            <xy-option th:each="course:${courseVoList}" th:key="${course.name}" th:value="${course.id}">
                [[${course.name}]]
            </xy-option>
            <!-- 1111课号 -->
            <!-- 还不错 -->
        </xy-select>
    </xy-form-item>

    <!-- 我们可以通过学生的学号,课号,确定他是哪个老师,所以后边也可以自动填写 -->
    <xy-form-item legend="任课老师">
        <xy-input name="teacher" placeholder="请填写任课老师姓名" required></xy-input>
    </xy-form-item>

    <xy-form-item legend="辅导员">
        <xy-select name="counselor" required search>
            <xy-option th:each="counselor:${counselorList}" th:key="${counselor.name}" th:value="${counselor.id}">
                [[${counselor.name}]]
            </xy-option>
            <!-- 1111课号 -->
            <!-- 还不错 -->
        </xy-select>
    </xy-form-item>

    <xy-form-item>
        <xy-button htmltype="submit" onclick="XyMessage.success('已成功提交申请，请勿重复提交，可到请假进度查看')" type="primary">提交申请
        </xy-button>
        <xy-button htmltype="reset">重置</xy-button>
    </xy-form-item>
</xy-form>

<script type="text/javascript">

    // $(function () {XyMessage.success('已成功提交申请，请勿重复提交，可到请假进度查看')});
    // $(function () {}); 的作用是页面加载是，执行function里面的代码

    // 当输入学号后，自动填写学生的姓名
    $("xy-input[name='stId']").blur(function () {
        let val = $(this).val();

        if (val !== '') {
            $.get('/student/getName/' + val, function (data) {
                $("xy-input[name='stName']").val(data);
            })
        }

    });

    $(function () {
        let val = $("xy-input[name='stId']").val();
        if (val !== '') {
            $.get('/student/getName/' + val, function (data) {
                $("xy-input[name='stName']").val(data);
            })
        }
    });

    // 根据学号，课号，自动填写任课老师名字
    $("xy-select[name='course']").change(function () {
        let courseId = $(this).val();
        $.get('/student/getTeacherName/' + courseId, function (data) {
            $("xy-input[name='teacher']").val(data);
        })

    });

    // 表单里那两个日期控件
    let date1 = $("xy-date-picker:nth-child(1)");
    let date2 = $("xy-date-picker:nth-child(2)");

    // 页面打开的时候赋初始值
    $(function () {
        $("input[name='startTime']").val(date1.val());
        $("input[name='endTime']").val(date2.val());
    });

    // 选择完日期后，重新赋值
    date1.blur(function () {
        $("input[name='startTime']").val($(this).val());
    });

    date2.blur(function () {
        $("input[name='endTime']").val($(this).val());
    });

</script>
</body>
</html>
